<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-30 16:38:22
 * @LastEditTime : 2022-09-30 16:38:29
 * @FilePath     : \表单控件绑定\v-model和组件\第四种(自定义v-model修饰符)\不带参数的修饰符\第二种：script setup\my-component.vue
-->
<template>
    <input
        type="text"
        :value="modelValue"
        @input="emitValue($event)"
    >
</template>

<script setup>
const props = defineProps({
    modelValue: String,
    //添加到组件 v-model 的修饰符将通过prop中的modelModifiers  提供给组件
    modelModifiers: {
        default: () => ({})
    }
})
const emits = defineEmits(["update:modelValue"])

const emitValue = (e) => {
    let value = e.target.value
    //props拿到
    console.log('1', props.modelModifiers.capitalize)  //true
    if(props.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
    }
    emits("update:modelValue", value)
}
</script>